<template>
  <div class="box-main">
    <div class="topHeaderCard">
      <a-tabs v-model:activeKey="activeKey" :bordered="false" size="small" @change="tabsChange">
        <a-tab-pane v-for="item in diseaseLite" :key="item" :tab="item" />
      </a-tabs>
    </div>
    <div class="bax-main-content">
      <Transition name="page" mode="out-in">
        <dispatch ref="dispatchRef" v-if="activeKey === '派单'" />
        <implement ref="implementRef" v-else-if="activeKey === '健康管理'" />
      </Transition>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import dispatch from './dispatch/index.vue'
import implement from './implement/index.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const diseaseLite = ref(['派单', '健康管理'])

const dispatchRef = ref()
const implementRef = ref()
const activeKey = ref('派单')
const tabsChange = (e) => {
  activeKey.value = e
}

// watch(route, () => {
//   console.log(route)
// })

// onMounted(() => {
//   if (route.query) {
//     if (route.query.type === 'dispatch') {
//       activeKey.value = '派单'
//     } else if (route.query.type === 'implement') {
//       activeKey.value = '健康管理'
//     } else if (route.query.type === 'manaPlan') {
//       activeKey.value = '健康管理'
//     }
//   }
// })
</script>
<style lang="less" scoped>
.box-main {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    width: 100%;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 0;
    overflow: hidden auto;

    .page-content {
      height: 100%;
    }
  }
}
</style>
